<!--
 * @Description: 
 * @Author: xuechengwu
 * @Email: 516385822@qq.com
 * @Date: 2022-01-27 16:48:36
 * @LastEditTime: 2022-02-07 12:04:37
 * @LastEditors: xuechengwu
-->
<template>
  <div class="layout-list-container">
      <div
        :draggable="customCanDraggable"
        @dragstart="customDragEnd"
        class="custom-layout layout-list-item"
      >
        <div class="layout-label">自定义</div>
        <el-input
          v-model="customSpan"
          placeholder="请输入布局比例，用“,”分隔"
          size="mini"
          >
        </el-input>
      </div>
      <div
        class="layout-list-item"
        data-layout="8,8,8"
        draggable
        @dragstart="dragEnd"
      >
        <el-row>
          <el-col span="8" class="layout-item" :style="{background: colors[2]}">8</el-col>
          <el-col span="8" class="layout-item" :style="{background: colors[0]}">8</el-col>
          <el-col span="8" class="layout-item" :style="{background: colors[2]}">8</el-col>
        </el-row>
      </div>
      <div
        class="layout-list-item"
        data-layout="12,12"
        draggable
        @dragstart="dragEnd"
      >
        <el-row>
          <el-col span="12" class="layout-item" :style="{background: colors[2]}">12</el-col>
          <el-col span="12" class="layout-item" :style="{background: colors[0]}">12</el-col>
        </el-row>
      </div>
      <div
        class="layout-list-item"
        data-layout="8,16"
        draggable
        @dragstart="dragEnd"
      >
        <el-row>
          <el-col span="8" class="layout-item" :style="{background: colors[2]}">8</el-col>
          <el-col span="16" class="layout-item" :style="{background: colors[0]}">16</el-col>
        </el-row>
      </div>
      <div
        class="layout-list-item"
        data-layout="16,8"
        draggable
        @dragstart="dragEnd"
      >
        <el-row>
          <el-col span="16" class="layout-item" :style="{background: colors[2]}">16</el-col>
          <el-col span="8" class="layout-item" :style="{background: colors[0]}">8</el-col>
        </el-row>
      </div>
      <div
        class="layout-list-item"
        data-layout="6,6,6,6"
        draggable
        @dragstart="dragEnd"
      >
        <el-row>
          <el-col span="6" class="layout-item" :style="{background: colors[2]}">6</el-col>
          <el-col span="6" class="layout-item" :style="{background: colors[1]}">6</el-col>
          <el-col span="6" class="layout-item" :style="{background: colors[2]}">6</el-col>
          <el-col span="6" class="layout-item" :style="{background: colors[1]}">6</el-col>
        </el-row>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customSpan: '',
      colors: ['rgba(0,146,255,1)', 'rgba(0,146,255,.85)', 'rgba(0,146,255,.75)', 'rgba(0,146,255,.65)', 'rgba(0,146,255,.5)']
    };
  },
  computed: {
    customCanDraggable() {
      const spans = this.customSpan;
      return !(spans.trim() === '');
    }
  },
  methods: {
    customDragEnd() {
      const spans = this.customSpan;
      if (spans.trim() === '') {
        this.$message({
          message: '请输入布局比例',
          type: 'warning'
        });
      }
      const layout = spans.replace(/，/g, ',').split(',').map(vo => parseInt(vo.trim()));
      const sum = layout.reduce((sum, vo) => sum + vo, 0);
      this.$store.commit('SET_LAYOUT', { payload: 'layout', layout: layout.map(vo => Math.round(vo / sum * 24)) });
    },
    dragEnd(e) {
      const { layout } = e.target.dataset;
      this.$store.commit('SET_LAYOUT', { payload: 'layout', layout: layout.split(',').map(vo => Number(vo)) });
    },
    dragStart() {
        
    }
  }
}
</script>

<style lang="less" scoped>
.layout-list-container {
  padding: 12px 16px;
}
.custom-layout {
  font-size: 14px;
  cursor: move;
  .layout-label {
    margin-bottom: 4px;
  }
}
.layout-list-item {
  margin-bottom: 16px;
}
.layout-item {
  height: 48px;
  text-align: center;
  line-height: 48px;
  color: #FFF;
}
</style>